<template>
    <div v-if="moban.i">
        <el-form-item label="图片地址" v-if="moban.el.type=='BaseImg'">
            <el-input v-model="moban.el.options.defaultValue"/>
        </el-form-item>
        <el-form-item label="标题内容" v-if="moban.el.type=='BaseTitle'||moban.el.type=='BaseTag'||moban.el.type=='BaseButton'">
            <el-input v-model="moban.el.options.defaultValue"/>
        </el-form-item>
        <el-form-item label="默认值" v-if="moban.el.type!='BaseIcon'&&moban.el.type!='BaseIconZu'&&moban.el.type!='BaseBg'">
            <el-select filterable allow-create v-model="data.list[moban.i].options.defaultValue" @change="changeValue">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <common-set-config :data="moban.el"/>
        <!-- 图标 -->
        <el-form-item label="图标" v-if="Object.keys(data.list[moban.i].options).indexOf('iconName')>=0">
            <el-button @click="dialogIconVisible = true" type="primary" >选择图标</el-button>
            <el-input disabled v-model="data.list[moban.i].options.iconName"/>
        </el-form-item>
        <el-dialog
            title="选择图标"
            :visible.sync="dialogIconVisible"
            width="60%">
            <icon-selector @change="changeIcon"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogIconVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogIconVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import CommonSetConfig from '@/components/formMake2/setmoban/CommonSetConfig'
import IconSelector from '@/components/IconSelector'
export default {
    name: 'BaseMoban',
    components: {
        IconSelector,
        CommonSetConfig
    },
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        },
        moban: {
            type: Object
        }
    },
    data() {
        return {
            dialogIconVisible: false
        }
    },
    methods: {
        changeIcon(e) {
            this.data.list[this.moban.i].options.iconName = e
        },
        changeValue(e) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            this.data.list[this.moban.i].options.defaultValue = obj.code
            this.data.list[this.moban.i].options.defaultCName = obj.name
        }
    }
}
</script>
